<template>
	<view class="warpper" :class="{'top': top}" v-if="banner.pictureUrl">
		<uni-notice-bar v-if="notice" scrollable single showIcon  background-color="#fff" color="#000"
			:text="notice"></uni-notice-bar>
		<navigator v-if="banner.linkMode == 0" class="warp" :url="`/pages/goods/index?id=${banner.goodsId}`">
			<image class="banner" :src="banner.pictureUrl" >
			
			</image>
		</navigator>
		<a v-else class="warp" :href="banner.linkUrl" target="_blank">
			<view :style="'background-image: url('+banner.pictureUrl+');'" style="height: 250px;width: 100%;">
				<view class="flex-column" style="height: 100%;justify-content: center;">
					<view class="title">从AI创意到产品落地，一站式服务平台</view>
					<view class="title1">From AI Creativity to Product Implementation: One-Stop Service Platform</view>
					<view class="title2">AI智能设计 样品制作 模具开发 订单生产</view>
				</view>
				
			</view>
			<!-- <img class="banner" :src="banner.pictureUrl" > -->
			
			<!-- </img> -->
		</a>
		<view
			style="display: flex;justify-content: center;align-items: center;top: 60%;position: absolute;width: 100%;">
			<view style="display: flex;justify-content: center;align-items: center;">
				<view style="background-color: #000718;margin-left: 0;cursor: pointer;" class="top_card" @click="goUrl('/pages/workbench/ai/ai')">
					<view>
						<view class="top_text">款式融合</view>
						<view class="top_text1">多款智能融合</view>
						<view class="top_text2">前往使用<image style="height: 25px;width: 25px;margin-left: 10px;"
								src="../../static/image/home/y.png"></image>
						</view>
					</view>
					<image style="height: 115px;width: 115px;margin: 15px;" src="/static/image/home/x2.png">
					</image>
				</view>
				<view style="background-color: #000718;cursor: pointer;" class="top_card" @click="goUrl('/pages/workbench/text/text')">
					<view>
						<view class="top_text">文字创款</view>
						<view class="top_text1">灵感创作</view>
						<view class="top_text2">前往使用<image src="../../static/image/home/y.png"
								style="height: 25px;width: 25px;margin-left: 10px;"></image>
						</view>
					</view>
					<image style="height: 115px;width: 115px;margin: 15px;" src="/static/image/home/x.png">
					</image>
				</view>
				<view style="background-color: #000718;cursor: pointer;" class="top_card">
					<view>
						<view class="top_text">开发打样</view>
						<view class="top_text1">提供设计研发服务</view>
						<view class="top_text2">前往使用<image style="height: 25px;width: 25px;margin-left: 10px;"
								src="../../static/image/home/y.png"></image>
						</view>
					</view>
					<image style="height: 115px;width: 115px;margin: 15px;" src="/static/image/home/x1.png">
					</image>
				</view>
				<view style="background-color: #000718;cursor: pointer;" class="top_card">
					<view class="top_text" style="padding: 0;padding-left: 60px;width: 50px;height: 60px;">
						更多功能
					</view>
					<image style="height: 65px;width: 65px;margin: 15px;padding-right: 40px;"
						src="/static/image/home/y1.png">
					</image>
				</view>
			</view>
		</view>
		<view style="height: 150px;"></view>
	</view>

</template>

<script>
	export default {
		props: {
			banner: {
				type: Object,
				default () {
					return {
						notice:[],
					};
				}
			},
			top: {
				type: Boolean,
				default: false
			}
		},
		methods:{
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			noticeQuery() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/admin/v1/notice?type=3";
				this.$util.request('/admin/v1/notice?type=3', {page: 0,
						size: 100}, (res) => {
					console.log(res)
					var list = res.data;
					if (list.length > 0) {
						var notice = list[0];
						var name = notice.name;
						var content = notice.content;
						that.notice = name + "------" + content
					}
				}, true);
			},
			
		}
	}
</script>

<style lang="scss">
	
	.top_text {

		height: 17px;
		font-size: 22px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		color: #DBDBDB;
		padding: 20px;
	}

	.top_text1 {

		height: 17px;
		font-size: 14px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 350;
		color: #848484;
		padding-left: 20px;
	}

	.top_text2 {

		height: 17px;
		font-size: 14px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		color: #DBDBDB;
		padding: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top_card {
		// width: 25%;
		height: 140px;
		background: #000718;
		border-radius: 7px 7px 7px 7px;
		opacity: 1;
		// border: 1px solid;
		// border-image: linear-gradient(270deg, #0033ff, #d000ff) 1 1;
		margin-left: 18px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 2px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, #222, #222), linear-gradient(270deg, #0033ff, #d000ff);
	}

	.warpper {
		position: relative;
		background-color: $bg-color-grey;

		&.top {

			.warp,.banner {
				width: 100% !important;
				padding: 0 !important;
				margin-bottom: -5px;
				height: auto !important;
				max-height: 200px;
				position: relative;
				.title{
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 900;
					font-size: 45px;
					color: #FFFFFF;
					margin-bottom: 20px;
				}
				.title1{
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 300;
					font-size: 15px;
					color: #FFFFFF;
					margin-bottom: 12px;
				}
				.title2{
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 300;
					font-size: 15px;
					color: #FFFFFF;
					margin-bottom: 20px;
				}
			}
		}

		.warp {
			width: $page-width;
			display: block;
			margin: 0 auto;
			padding: 22px 0;
			cursor: pointer;

			.banner {
				width: $page-width;
				height: 120px;
			}
		}
	}
</style>